<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        function checkTxt() {
            var txt;
            $.ajax({
            url:"/ajax/checkName",                //请求服务器的url路径
            async:false,  // 向服务器发送ajax同步请求
            type:"POST",                          //提交方式
            data:"name="+$("#name").val(),    //提交服务服务器的表单数据
            success:function (info) {             //回掉函数，用于处理响应信息,info表示服务器发送给客户端的数据
                //   alert(info)
                // $("#infoSpan").html(info)
                // $("#infoSpan").css("color","red");
                txt = info;
                alert("ajax函数中:" + txt);
                if(info == "ok"){
                    $("#infoSpan").html("可以使用");
                    $("#infoSpan").css("color","green");
                }else {
                    $("#infoSpan").html("该用户已注册");
                    $("#infoSpan").css("color","red");
                }
            }
        });
            alert("function方法中：" + txt);
        }

        function checkPost() {
            var txt;
            $.ajaxSetup({
               async:false
            });
            //向服务器发送POST的ajax请求，第一个参数为URL
            //第二个参数为表单数据，第三个为回调函数，处理响应信息
            $.post("/ajax/checkName","name="+$("#name").val(),function (info) {
                txt = info;
                alert("ajax函数中:" + txt);
            })
            $.ajaxSetup({
                async:true
            });
            alert("function方法中：" + txt);
        }

    </script>
</head>
<body>
    <h2>请填写注册信息</h2>
    用户名：<input type="text" name="name" id="name" onblur="checkPost()">
    <span id="infoSpan"></span>
</body>
</html>